<template>
  <div class="home">
    <div class="home-seek">
      <div class="info">
        <i class="iconfont icon-iconseek01"></i>
        <span>请输入关键字</span>
      </div>
    </div>
    <div class="home-banner">
      <mt-swipe :auto="4000">
        <mt-swipe-item><img src="../images/nav/nav1.png" alt=""></mt-swipe-item>
        <mt-swipe-item><img src="../images/nav/nav2.png" alt=""></mt-swipe-item>
        <mt-swipe-item><img src="../images/nav/nav3.png" alt=""></mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="home-nav">
      <div class="nav-1">
        <ul>
          <router-link to="/production" tag="li">
            <span>新品推荐</span>
            <i class="iconfont icon-yooxi"></i>
          </router-link>
          <router-link to="/production" tag="li">
            <span>爆款商品</span>
            <i class="iconfont icon-hot"></i>
          </router-link>
          <router-link to="/my" tag="li">
            <span>设计师作品</span>
            <i class="iconfont icon-iconseek01"></i>
          </router-link>
          <router-link to="/my" tag="li">
            <span>品牌定制</span>
            <i class="iconfont icon-icon"></i>
          </router-link>
        </ul>
      </div>
      <div class="nav-2">
        <ul>
          <li>高端原创</li>
          <li>欧美简洁</li>
          <li>欧美简洁</li>
          <li>欧美简洁</li>
          <li>欧美简洁</li>
          <li>欧美简洁</li>
          <li>欧美简洁</li>
          <li>欧美简洁</li>
          <div class="clearfix"></div>
        </ul>
      </div>
    </div>
    <div class="home-video">
      <video src="http://ylm101.com/uploadfiles/file/201803/1.mp4" controls  preload poster="http://yilunew.oss-cn-shenzhen.aliyuncs.com/upload-dir/uploadfiles/admin/19284bf0e1f30ad167d17e46e243b8c3b42fbabf.png?0.502394434397907"></video>
    </div>
    <div class="home-message">
      <ul>
        <li>
          <img src="../images/message/message1.png" alt="">
          <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquid consectetur dolorem, doloremque eligendi est eum facere in minima obcaecati perspiciatis quasi quod reiciendis, rem tempora tempore ut voluptatibus.</p>
          </div>
        </li>
        <li>
          <img src="../images/message/message1.png" alt="">
          <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquid consectetur dolorem, doloremque eligendi est eum facere in minima obcaecati perspiciatis quasi quod reiciendis, rem tempora tempore ut voluptatibus.</p>
          </div>
        </li>
        <li>
          <img src="../images/message/message1.png" alt="">
          <div>
            <img src="../images/message/title.png" alt="">
          </div>
        </li>
        <div class="clearfix"></div>
      </ul>
    </div>
  </div>
</template>
<script typy="text/ecmascript-6">
export default {
  name: 'Home',
  data () {
    return {
      selected: '作品'
    }
  }
}
</script>
<style scoped lang="less" rel="stylesheet/less">
  @import "../../lib/less/variable";
  @import "../../lib/less/normalize";
  .home{
  .mb(150);
    /*顶部搜索*/
    .home-seek{
      background: #fff;
      width: 100%;
      .h(45);
      .padding(5,5);
      box-sizing: border-box;
      .info{
        border: 1px solid #ccc;
        border-radius: 2px;
        width: 100%;
        i{
         .ml(5);
          .fs(22);
          vertical-align: middle;
        }
        span{
          .fs(14);
          color: #ccc;
        }

      }
    }
    /*轮播banner*/
    .home-banner{
      width: 100%;
      .h(225);
      img{
        width: 100%;
      }
    }
    /*导航nav*/
    .home-nav{
      width: 100%;
      .nav-1{
        width: 100%;
        background: #fff;
        .h(60);
        .lh(30);
        text-align: center;
        ul{
          display: flex;
          li{
            flex: 1;
            i,span{
              display: block;

            }
            i{
              .fs(30);
              position: relative;
              .top(-5)

            }
          }
        }
      }
      .nav-2{
        background: #fff;
        .mt(8);
        ul{
          text-align: center;
          box-sizing: border-box;
          li{
            width: 22%;
            .h(25);
            .lh(25);
            float: left;
            border: 1px solid #000;
            .ml(5);
            .mt(5);
            .mb(5);
            .mr(5);
            box-sizing: border-box;
            .fs(14)

          }
        }

      }
    }
    /*视频*/
    .home-video{
      width: 100%;
      video{
        width: 100%;
        .h(240);
      }
    }
    /*资讯*/
    .home-message{
      width: 100%;
      ul{
        li{
          display: inline-block;
          width: 33.33%;
          .h(180);
          float: left;
          img{
            width: 100%;
            height: 100%;
          }
          div{
            .h(30);
            .lh(15);
            background: #000;
            opacity: 0.8;
            position: relative;
            .top(-45);
            p{
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              word-break: break-word;
              color: #fff;
            }
          }
        }
      }
    }

  }

</style>
